<template>
	<view class="full-page theme-1 root-style">
		<!-- #ifdef MP -->
		<u-navbar :is-back="false" is-fixed :background="{background: '#00000000'}" :border-bottom="false"></u-navbar>
		<!-- #endif -->
		
		<!-- 我的课程：教师 -->
		<class-teacher-expand></class-teacher-expand>
		<!-- 我的课程：学员 -->
		<class-student-expand></class-student-expand>
		
		<view class="search-type">
			<view class="search-type-item all" @click="handleChangeSearchType(0)">
				<text class="type-name">全部</text>
				<image class="type-icon" src="https://nx5.abc5g.com/res/static/class/lesall.png"></image>
			</view>
			<view class="search-type-item c1" @click="handleChangeSearchType(1)">
				<view class="text-line">
					<text class="type-name">正式课</text>
					<image class="type-icon" src="https://nx5.abc5g.com/res/static/class/i-zk.png"></image>
				</view>
				<image class="bg-right" mode="heightFix" src="https://nx5.abc5g.com/res/static/class/bg-c1.png"></image>
			</view>
			<view class="search-type-item c2" @click="handleChangeSearchType(2)">
				<view class="text-line">
					<text class="type-name">保温课</text>
					<image class="type-icon" src="https://nx5.abc5g.com/res/static/class/bwicon.png"></image>
				</view>
				<image class="bg-right" mode="heightFix" src="https://nx5.abc5g.com/res/static/class/bg-c2.png"></image>
			</view>
		</view>
		<u-grid :col="isPc?7:4" :border="false" class="sub-search-type">
			<u-grid-item @click="handleChangeSubSearchType(0)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus0.png" class="sub-item-yyk"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===0?'active':''">全部</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(1)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus1.png" class="sub-item-yyk"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===1?'active':''">已预约</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(2)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus2.png" class="sub-item-yyk"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===2?'active':''">已确认</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(4)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus4.png" class="sub-item-yyk"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===4?'active':''">进行中</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(5)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus5.png" class="sub-item-yjs"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===5?'active':''">未评价</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(3)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus3.png" class="sub-item-yqx"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===3?'active':''">已取消</view>
			</u-grid-item>
			<u-grid-item @click="handleChangeSubSearchType(6)">
				<image src="https://nx5.abc5g.com/res/static/class/lesstatus6.png" class="sub-item-ypj"></image>
				<view class="sub-item-title" :class="classStore.subSearchType===6?'active':''">已评价</view>
			</u-grid-item>
		</u-grid>
		
		<!-- 课程列表：教师 -->
		<class-list-teacher v-if="classStore.isTeacher"></class-list-teacher>
		<!-- 课程列表：学员 -->
		<class-list-student v-if="classStore.isStudent"></class-list-student>
		
		<class-tester></class-tester>
		
		<u-tabbar
			:list="tabbar"
			:height="tabbarConfig.height"
			:icon-size="tabbarConfig.iconSize"
			:text-size="tabbarConfig.textSize"
			hide-tab-bar
		></u-tabbar>
	</view>
</template>
<script setup> 
	import { onHide } from '@dcloudio/uni-app';
	import { computed } from 'vue';
	import classTeacherExpand from './modules/class-teacher-expand.vue';
	import classStudentExpand from './modules/class-student-expand.vue';
	import classListTeacher from './modules/class-list-teacher.vue';
	import classListStudent from './modules/class-list-student.vue';
	import classTester from './modules/class-tester.vue';
	import { ktlapi, ktluser, lodash, OT, pivotJson2 } from '@/utils';
	import { useTabbarStore } from '@/store/tabbar';
	import { useClassStore } from '@/store/class';
	import { useTabbarConfig } from '@/common/hooks/tabbar-config.js';
	const { tabbar, bus } = useTabbarStore();
	const { tabbarConfig } = useTabbarConfig();
	const classStore = useClassStore();
	
	//var timer = null;
	
	const system = uni.getSystemInfoSync();
	const isPc = ref(false);
	if(system.windowWidth >= 1000){
		isPc.value = true;
	}
	
	// 切换筛选类型1
	function handleChangeSearchType(type){
		classStore.setSearchType(type);
	}
	// 切换筛选类型2
	function handleChangeSubSearchType(type){
		classStore.setSubSearchType(type);
	}
	
	const pagequery = ref({});
	onLoad((query) => { 
		pagequery.value = query; 
		if(query.type){
			classStore.setSearchType(query.type); 
		}
		if(query.status){
			classStore.setSubSearchType(query.status);  
		}
	})
	
	
	const getEvaluateInfo = (item, type) => {
		const EvaluateType = lodash.get(item, 'EvaluateType')
		if (EvaluateType === type) {
			return {
				EvaluateScore: item.EvaluateScore,
				EvaluateContent: item.Evaluate
			}
		}
		return {
			EvaluateScore: null,
			EvaluateContent: null
		}
	}
	
	function initEvaluateScore(inList) {
		const list = [];
		inList.forEach(item => {
			const found = list.find(l => l.UUID === item.UUID);
			const ToStudentEvaluate = getEvaluateInfo(item, 2)
			const ToTeacherEvaluate = getEvaluateInfo(item, 1)
			if (found) {
				if (ToTeacherEvaluate.EvaluateScore !== null) {
					found.ToTeacherEvaluateScore = ToTeacherEvaluate.EvaluateScore;
				}
				if (ToTeacherEvaluate.EvaluateContent !== null) {
					found.ToTeacherEvaluateContent = ToTeacherEvaluate.EvaluateContent;
				}
				if (ToStudentEvaluate.EvaluateScore !== null) {
					found.ToStudentEvaluateScore = ToStudentEvaluate.EvaluateScore;
				}
				if (ToStudentEvaluate.EvaluateContent !== null) {
					found.ToStudentEvaluateContent = ToStudentEvaluate.EvaluateContent;
				}
			} else {
				if (ToTeacherEvaluate.EvaluateScore !== null) {
					item.ToTeacherEvaluateScore = ToTeacherEvaluate.EvaluateScore;
				}
				if (ToTeacherEvaluate.EvaluateContent !== null) {
					item.ToTeacherEvaluateContent = ToTeacherEvaluate.EvaluateContent;
				}
				if (ToStudentEvaluate.EvaluateScore !== null) {
					item.ToStudentEvaluateScore = ToStudentEvaluate.EvaluateScore;
				}
				if (ToStudentEvaluate.EvaluateContent !== null) {
					item.ToStudentEvaluateContent = ToStudentEvaluate.EvaluateContent;
				}
				list.push(item)
			}
		})
		return list;
	}
	
	function loadLessons(){ 
		uni.showLoading({
			title: '加载中'
		});
		if (classStore.isTeacher) {
			ktlapi({
				action: "Cus_TeacherLessonList",
				data: {
					"TeacherAccountId": ktluser.BaseInfo().AccountID
				}
			}).then(res => {
				uni.hideLoading();
				const list = initEvaluateScore(res.data);
				classStore.setLessonList(list); 
			});
		} else {
			ktlapi({
				action: "Cus_MyLessonList",
				data: {
					"StudentAccountId": ktluser.BaseInfo().AccountID
				}
			}).then(res => {
				uni.hideLoading();
				const list = initEvaluateScore(res.data);
				classStore.setLessonList(list);  
			});
		}
	}
	onShareAppMessage(()=>{})
	onShow(() => {  
		console.log(pagequery.value);
		if(uni.getStorageSync("status")){ 
			 classStore.setSubSearchType(uni.getStorageSync("status"));  
			 uni.removeStorageSync("status");
		}else{
			if(pagequery.value.status){
				classStore.setSubSearchType(pagequery.value.status);  	
				pagequery.value = {};
			}else{
				classStore.setSubSearchType(0);  	
			} 
		} 
		if (ktluser.hasRole(2)) {
			classStore.initTeacherData();
		} else if (ktluser.hasRole([3, 4]) && !ktluser.hasRole(2)) {
			classStore.initStudentData();
		}
		loadLessons();
		// timer = setInterval(()=>{
		// 	loadLessons();
		// }, 60000) 
	})
	
	onHide(()=>{
		//clearInterval(timer);
	})
	
	onMounted(() => {    
		if(!ktluser.hasRole([2, 3, 4])){
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
		
		if (ktluser.hasRole(2)) {
			classStore.initTeacherData();
		} else if (ktluser.hasRole([3, 4]) && !ktluser.hasRole(2)) {
			classStore.initStudentData();
			classStore.loadSubjectList();
		}
		
		
		
		uni.onWindowResize((res) => {
			if(res.size.windowWidth >= 1000){
				isPc.value = true;
			} else {
				isPc.value = false;
			}
		})
	})
	 
</script>
<style lang="scss">
	.full-page{
		--card-margin: 30rpx;
		background-color: #f8f9fb !important;
	}
	
	.option-box{
		display: flex;
		justify-content: flex-end;
		margin: var(--card-margin);
	}
	
	.search-type{
		display: flex;
		margin: var(--card-margin);
		justify-content: space-between;
		margin-top: 0;
		
		.search-type-item{
			align-items: center;
			width: calc((100% - var(--card-margin)*2)/3);
			height: 138rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			position: relative;
			
			.text-line{
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
			}
		}
		
		.all{
			background: #fce2bf;
			color: #763b1d;
		}
		.c1{
			background: #fce2bf;
			color: #763b1d;
		}
		.c2{
			background: #fed7c6;
			color: #992027;
		}
		.type-name{
			margin-left: 20rpx;
			font-size: var(--text-14);
			margin-top: -30rpx;
		}
		.type-icon{
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
			margin-top: -30rpx;
		}
		.bg-right{
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			max-height: 100%;
		}
	}
	
	.sub-search-type{
		display: flex;
		margin: 0 var(--card-margin);
		min-height: 200rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		width: unset !important;
		overflow: hidden;
		
		.sub-item-title{
			color: #333;
		}
		.sub-item-title.active{
			color: #ec6d25;
		}
		
		.sub-item-yyk{
			width: 70rpx;
			height: 70rpx;
		}
		.sub-item-yjs{
			width: 90rpx;
			height: 70rpx;
			margin-left: -30rpx;
		}
		.sub-item-yqx{
			width: 60rpx;
			height: 70rpx;
		}
		.sub-item-ypj{
			width: 60rpx;
			height: 70rpx;
		}
		.sub-item-title{
			margin-top: 16rpx;
			color: #777;
			font-size: var(--text-12);
		}
	}
	
	
	/* 针对 1280px 分辨率 */
	@media(min-width:1200px){
		.full-page{
			--card-margin: 60rpx;
		}
		
		.search-type{
			.search-type-item{
				height: 300rpx;
				border-radius: 20rpx;
			}
			
			.c1{
				background-size: 22%;
			}
			.c2{
				background-size: 30%;
			}
			
			.type-name{
				margin-left: 60rpx;
				font-size: 60rpx;
				margin-top: -70rpx;
			}
			.type-icon{
				width: 55rpx;
				height: 55rpx;
				margin-left: 16rpx;
				margin-top: -70rpx;
			}
		}
	
		.sub-search-type{
			min-height: 350rpx;
			border-radius: 16rpx;
			
			.sub-item-yyk{
				width: 140rpx;
				height: 140rpx;
			}
			.sub-item-yjs{
				width: 150rpx;
				height: 140rpx;
				margin-left: -60rpx;
			}
			.sub-item-yqx{
				width: 130rpx;
				height: 140rpx;
			}
			.sub-item-ypj{
				width: 130rpx;
				height: 140rpx;
			}
			.sub-item-title{
				margin-top: 16rpx;
				font-size: 50rpx;
			}
		}
	
		.class-list-warp{
			margin: 50rpx var(--card-margin);
			
			.title{
				font-size: 50rpx;
				
				.title-tag{ padding-top: 5rpx; padding-bottom: 5rpx; }
				.title-more{ font-size: 36rpx; }
			}
			
			
		}
	}
</style>